<template>
  <div class="setting">
    <!-- 卡片容器 -->
    <el-card>
      <!-- tab选项 -->
      <el-tabs v-model="activeName">
        <el-tab-pane label="角色管理" name="first">
          <!-- 新增按钮 -->
          <el-button
            class="el-btn"
            type="primary"
            size="mini"
            @click="addRole"
          ><i class="el-icon-plus" /> 新增角色</el-button>
          <!-- 表格 -->
          <el-table :data="list" border>
            <el-table-column label="序号" type="index" width="50px" />
            <el-table-column label="职务" prop="name" />
            <el-table-column label="描述" prop="description" />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="openRole(scope.row)"
                >分配权限</el-button>
                <el-button
                  type="text"
                  @click="openEdit(scope.row)"
                >修改</el-button>
                <el-button
                  type="text"
                  @click="delRole(scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 el-pagination
          属性:
          page-sizes 分页选项的集合
          page-size 页容量
          current-page 当前页
          total 数据的总条数
          layout 分页组件的布局
          事件:
          size-change 页容量发生改变时触发
          current-change 当前页发生改变时触发 -->
          <el-pagination
            :page-sizes="pageSizes"
            :page-size="pageSize"
            :current-page="page"
            :total="total"
            layout="total,sizes,prev,pager,next,jumper"
            @current-change="currentChange"
            @size-change="sizeChange"
          />
        </el-tab-pane>
        <el-tab-pane label="公司信息" name="second">
          <!-- 表单 -->
          <el-form class="myform" :model="companyForm" label-width="100px">
            <el-form-item label="企业名称">
              <el-input v-model="companyForm.name" disabled />
            </el-form-item>
            <el-form-item label="公司地址">
              <el-input v-model="companyForm.companyAddress" disabled />
            </el-form-item>
            <el-form-item label="公司电话">
              <el-input v-model="companyForm.companyPhone" disabled />
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="companyForm.mailbox" disabled />
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="companyForm.remarks" disabled />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <el-dialog title="编辑角色" :visible.sync="dialogShow">
        <el-form :model="form" label-width="80px">
          <el-form-item label="角色名称">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="角色描述">
            <el-input v-model="form.description" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </div>
      </el-dialog>
      <!-- 新增角色 -->
      <el-dialog :visible="addShow" title="新增角色">
        <add @guanbi="addShow = false" @shuaxin="fn" />
      </el-dialog>
    </el-card>
    <!-- 分配权限面板 -->
    <setrole ref="myrole" :role-show.sync="roleShow" :role-obj="currentRole" />
  </div>
</template>

<script>
import setrole from './compment/setrole.vue'
import add from './compment/add.vue'
import {
  getRoleListAPI,
  updateRoleAPI,
  delRoleAPI,
  getCompanyAPI
} from '@/api/index'
export default {
  components: {
    add,
    setrole
  },
  data() {
    return {
      // 控制分配权限面板的显示与隐藏
      roleShow: false,
      // 保存当前操作的角色信息
      currentRole: {},
      // 控制新增面板的显示与隐藏
      addShow: false,
      // 选中的 tab 中的 name 属性
      activeName: 'first',
      // 表格中的数据源
      list: [],
      // 分页组件的集合
      pageSizes: [3, 5, 10, 15, 20],
      // 页容量
      pageSize: 5,
      // 当前页
      page: 1,
      // 数据传的总条数
      total: 0,
      // 控制面板的显示与隐藏
      dialogShow: false,
      // 编辑面板的数据源
      form: {
        name: '',
        description: ''
      },
      companyForm: {}
    }
  },
  created() {
    // 页面加载完毕时调用方法
    this.getRoleList()
    this.getCompany()
  },
  methods: {
    // 点击时触发
    openRole(row) {
      // 打开分配权限面板
      this.roleShow = true
      // 保存当前操作的角色信息
      this.currentRole = row
      // 调用setrole组件的方法
      this.$refs.myrole.getRoleDetail(row.id)
    },
    async getCompany() {
      // 得到当前登录用户公司的 id
      const companyId = this.$store.state.user.userInfo.companyId
      // 发起请求获得当前用户的公司数据
      const res = await getCompanyAPI(companyId)
      // console.log(res)
      // 保存公司数据
      this.companyForm = res.data
    },
    // 新增成功后关闭对话框，刷新页面
    fn() {
      this.addShow = false
      // 重新渲染页面
      this.getRoleList()
    },
    // 点击时删除角色
    delRole(row) {
      this.$confirm('确定要删除改角色数据吗?')
        .then(async() => {
          // 调用删除接口删除数据
          const res = await delRoleAPI(row.id)
          // console.log(res)
          if (this.list.length === 1) {
            this.page--
          }
          if (this.total === 1) {
            this.page = 1
          }
          // 删除成功后提示
          this.$message.success(res.message)
          // 重新渲染面板
          this.getRoleList()
        })
        .catch(() => {
          console.log('取消')
        })
    },
    // 点击时打开新增面板
    addRole() {
      this.addShow = true
    },
    // 点击确定时触发的事件
    async submit() {
      // 发起请求，修改角色数据
      const res = await updateRoleAPI(this.form)
      // console.log(res)
      // 关闭对话框
      this.dialogShow = false
      // 修改完成后提示
      this.$message.success(res.message)
      // 重新加载页面数据
      this.getRoleList()
    },
    // 点击取消触发的事件
    cancel() {
      // 关闭dialog面板
      this.dialogShow = false
      // 清除数据
      this.form = {
        name: '',
        description: ''
      }
    },
    // 打开编辑面板
    openEdit(row) {
      // row 当前操作行的数据
      // 打开编辑面板
      this.dialogShow = true
      // 将当前行的数据渲染到表单中
      this.form = { ...row }
    },
    // 当页面改变时触发
    currentChange(page) {
      // page 代表当前页码
      this.page = page
      // 根据当前页码重新发送请求
      this.getRoleList()
    },
    // 当页容量发生改变时触发
    sizeChange(size) {
      // size 代表改编后的页容量
      this.pageSize = size
      // 重新发送请求
      this.getRoleList()
    },
    // 封装方法，调用时发起请求获得数据
    async getRoleList() {
      // 发起请求
      const res = await getRoleListAPI({
        page: this.page, // 当前页
        pagesize: this.pageSize // 页容量
      })
      // 将得到的数据保存到数组中
      this.list = res.data.rows
      // console.log(this.list)
      // 保存数据的总条数
      this.total = res.data.total
    }
  }
}
</script>

<style lang="scss">
.setting {
  margin: 25px;
  .el-button.el-btn {
    padding: 6px 10px;
    margin-bottom: 18px;
  }
  .el-pagination {
    text-align: right;
    margin-top: 28px;
  }
  .el-table tbody > tr > td {
    padding: 8px 0;
  }
  .el-dialog {
    width: 36%;
    margin-top: 25vh !important;
  }
  .el-dialog__body {
    padding-bottom: 0;
  }
  .dialog-footer {
    margin: 0;
    padding: 0;
  }
  .myform {
    width: 520px;
    margin: 30px 0 0 65px;
  }
}
</style>
